// pages/card-detail/card-detail.js
Page({
  data: {
    currentItem: {
      id: 1,
      image: '/images/景点-1.jpg',
      title: 'Hibiscus Valley',
      price: 173.00,
      discount: 50,
      rating: 4.3,
      views: '1k',
      userAvatars: [
        '/images/tab-icons/README.md',
        '/images/tab-icons/README.md',
        '/images/tab-icons/README.md'
      ],
      description: '黄山：世界文化与自然双重遗产，世界地质公园，国家AAAAA级旅游景区，国家级风景名胜区，全国文明风景旅游区示范点，中华十大名山，天下第一奇山。'
    },
    relatedItems: [],
    currentIndex: 0,
    heroImageAnimation: null,
    navHeight: 132 // 导航栏高度
  },

  onLoad(options) {
    this.initCardDetail(options);
  },

  // 初始化卡片详情
  initCardDetail(options) {
    const { id } = options;
    
    // 从缓存中获取卡片数据
    const cardData = wx.getStorageSync('cardDetail');
    
    if (cardData) {
      // 转换数据格式以适应详情页面
      const detailData = this.transformCardData(cardData);
      this.setData({
        currentItem: detailData
      });
    }

    // 获取相关推荐内容
    this.loadRelatedItems();
  },

  // 转换卡片数据格式
  transformCardData(cardData) {
    // 根据原始数据生成详情页需要的数据
    const detailDataMap = {
      1: { 
        rating: 4.3, 
        theme: 'SUNRISE',
        tags: ['日出观景', '摄影圣地', '自然风光'],
        description: '黄山：世界文化与自然双重遗产，世界地质公园，国家AAAAA级旅游景区，国家级风景名胜区，全国文明风景旅游区示范点，中华十大名山，天下第一奇山。'
      },
      2: { 
        rating: 4.5, 
        theme: 'PHOTOGRAPHY',
        tags: ['云海奇观', '摄影天堂'],
        description: '云雾缭绕的山峰，宛如仙境一般的美景，让人流连忘返。这里是摄影师的天堂，也是心灵的净土。每一个角度都能拍出令人惊叹的照片。'
      },
      3: { 
        rating: 4.2, 
        theme: 'HIKING',
        tags: ['徒步路线', '森林探索', '自然体验'],
        description: '完美的徒步路线，穿越原始森林，感受大自然的魅力。每一步都是惊喜，每一眼都是风景。适合各个年龄段的游客前来体验。'
      },
      4: { 
        rating: 4.7, 
        theme: 'NATURE',
        tags: ['绿色森林', '清新空气'],
        description: '绿意盎然的森林，空气清新，鸟语花香。这里是城市人群逃离喧嚣的最佳选择，让心灵得到彻底的放松和净化。'
      },
      5: { 
        rating: 4.6, 
        theme: 'ADVENTURE',
        tags: ['户外探险', '山径徒步', '惊喜发现'],
        description: '山间小径的惊喜发现，每一个转弯都可能遇到意想不到的美景。户外探险者的乐园，挑战与美景并存的完美体验。'
      }
    };

    const itemData = detailDataMap[cardData.id] || detailDataMap[1];
    
    return {
      ...cardData,
      ...itemData,
      // 保持原有的卡片标题
      title: cardData.title,
      // 保持原有的用户信息
      name: cardData.name,
      avatar: cardData.avatar || '/images/游客.png'  // 默认使用游客.png
    };
  },

  // 加载相关推荐
  loadRelatedItems() {
    // 模拟相关推荐数据
    const relatedItems = [
      this.data.currentItem,
      {
        id: 99,
        title: 'Related Item 1',
        image: '/images/景点-2.jpg'
      },
      {
        id: 98,
        title: 'Related Item 2', 
        image: '/images/景点-3.jpg'
      }
    ];

    this.setData({
      relatedItems
    });
  },

  // 返回上一页 (由于删除了导航栏，可以通过手势或系统返回)
  onBack() {
    wx.navigateBack({
      delta: 1
    });
  },

  // 切换到指定项目
  switchToItem(e) {
    const { index } = e.currentTarget.dataset;
    const { relatedItems } = this.data;
    
    this.setData({
      currentIndex: index,
      currentItem: relatedItems[index]
    });

    this.triggerImageTransition();
  },

  // 图片切换动画
  triggerImageTransition() {
    const animation = wx.createAnimation({
      duration: 400,
      timingFunction: 'ease-out'
    });
    
    animation.scale(1.05).step();
    animation.scale(1).step();
    
    this.setData({
      heroImageAnimation: animation.export()
    });
  },

  // 手势滑动切换
  onTouchStart(e) {
    this.setData({
      touchStartX: e.touches[0].clientX
    });
  },

  onTouchEnd(e) {
    const { touchStartX } = this.data;
    const touchEndX = e.changedTouches[0].clientX;
    const diff = touchStartX - touchEndX;
    
    // 滑动距离超过50px才触发切换
    if (Math.abs(diff) > 50) {
      this.switchItem(diff > 0 ? 'next' : 'prev');
    }
  },

  // 切换项目
  switchItem(direction) {
    const { currentIndex, relatedItems } = this.data;
    let newIndex = currentIndex;
    
    if (direction === 'next' && currentIndex < relatedItems.length - 1) {
      newIndex = currentIndex + 1;
    } else if (direction === 'prev' && currentIndex > 0) {
      newIndex = currentIndex - 1;
    }
    
    if (newIndex !== currentIndex) {
      this.setData({
        currentIndex: newIndex,
        currentItem: relatedItems[newIndex]
      });
      this.triggerImageTransition();
    }
  },

  // 点击操作按钮
  onActionTap() {
    const { currentItem } = this.data;
    wx.showToast({
      title: `收藏 ${currentItem.title}`,
      icon: 'success'
    });
  },

  // 分享功能
  onShareAppMessage() {
    const { currentItem } = this.data;
    return {
      title: `发现了一个好地方：${currentItem.title}`,
      path: `/pages/card-detail/card-detail?id=${currentItem.id}`,
      imageUrl: currentItem.image
    };
  },

  // 导航栏返回事件
  onNavBackTap() {
    wx.navigateBack({
      fail: () => {
        // 如果没有上一页，则返回首页
        wx.reLaunch({
          url: '/pages/index/index'
        });
      }
    });
  },

  // 导航栏高度变化事件
  onNavHeightChange(e) {
    const { totalHeight } = e.detail;
    this.setData({
      navHeight: totalHeight
    });
  }
});
